<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 17:12:20
-->
<template>
  <!--1. 容器 -->
  <div ref="bottom2_container" style="height: 95%"></div>
</template>

<script>

//2、引入折线图构造函数
import { DualAxes } from '@antv/g2plot';
export default {
  data() {
    return{
      dataArr:[       
  { year: '2015', value: 6.7, count: 10.6 },
  { year: '2016', value: 6.7, count: 11.1 },
  { year: '2017', value: 6.7, count: 10.2 },
  { year: '2018', value: 6.7, count: 9.7 },
  { year: '2019', value: 7, count: 8 },
  { year: '2020', value: 8, count: 8 },
  { year: '2021', value: 6.7, count: 9.5 },
  { year: '2022', value: 6.7, count: 11 },
      ]

    }
  },
  created(){

  },

  mounted(){
    this.initChart()
  },

  methods:{
    initChart(){
      //3、创建一个折线图实例
      const dualAxes = new DualAxes(this.$refs.bottom2_container, {
      data: [this.dataArr, this.dataArr],
      xField: 'year',
  yField: ['value', 'count'],
  geometryOptions: [
    {
      geometry: 'line',
      color: '#5B8FF9',
    },
    {
      geometry: 'line',
      color: '#5AD8A6',
    },
  ],
});
    //4、渲染折线图
      dualAxes.render();
    }
  }

}
</script>
